<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="/css/style.css" />
  <link rel="icon" type="image/png" href="/img/favicon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Leon</title>
</head>
<body class="settingup">
	<main>
    <div id="feed">
      <p id="no-bubble" class="hide">
        You can start to interact with Leon, don't be shy.
      </p>
    </div>
    <div id="suggestions-container"></div>
    <div id="is-typing">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
    <div id="input-container">
      <div id="mic-container">
        <button id="mic-button"></button>
        <div id="sonar"></div>
      </div>
      <label for="utterance"></label>
      <input type="text" id="utterance" autocomplete="off" autofocus>
      <small>
        Use <kbd>↑</kbd> <kbd>↓</kbd> to browse history;
        <kbd>↵</kbd> to submit;
        <kbd>alt + c to listen.</kbd>
      </small>
    </div>
	</main>
	<footer>
		<div id="logo"></div>
		<div id="version">
			<small>v</small>
		</div>
    <div id="discord">
      <small class="italic">
        <a href="https://discord.gg/MNQqqKg" target="_blank">Join us on Discord</a>
      </small>
    </div>
	</footer>
  <script type="module" src="/js/main.js"></script>
</body>
</html>
